<script>
export default {
  name: "detail",
  data() {
    return {
      detail: {
        comments: []
      },
      consult: '',
      busId: ''
    }
  },
  onLoad({ id }) {
    this.busId = id
    this.$api.consultDetail(this.busId).then(res => {
      this.detail = res
    })
  },
  methods: {
    clickconsult() {
      if (!uni.getStorageSync('memberId')) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }
      if (!this.consult) {
        uni.showToast({
          title: '请输入您的意见',
          icon: 'none'
        })
        return
      }
      this.$api.commentCreate({
        consult_id: this.detail.id,
        member_id: uni.getStorageSync('memberId'),
        content: this.consult
      }).then(res => {
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        })
        this.consult = ''
        this.$api.consultDetail(this.busId).then(res2 => {
          this.detail = res2
        })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<template>
<!--  详情以及评论的列表 -->
  <view class="detail">
    <view class="detail-content">
      <view class="detail-content-title">详情</view>
      <view class="detail-content-title">{{ detail.content }}</view>
      <view class="detail-content-item" v-for="(item, index) in detail.comments || []" :key="index">
        <view class="detail-content-item-title">{{ item.member.nickname || '' }}：{{ item.content }}</view>
        <view class="detail-content-item-content">{{ item.create_time }}</view>
      </view>
    </view>
    <view class="comment">
      <view class="comment-content">
        <view class="comment-content-title">回复：</view>
        <view class="comment-content-input">
          <textarea v-model="consult" placeholder="请输入您的意见" style="height: 200rpx; width: 100%;"></textarea>
        </view>
        <view class="comment-content-btn" @click="clickconsult">
          <button>提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.detail {
  height: 100%;
  background-color: #F5F7FA;
  padding: 20rpx;
  .detail-content {
    padding: 20rpx;
    .detail-content-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .detail-content-item {
      padding: 20rpx;
      border-bottom: 1px solid #f0f0f0;
      .detail-content-item-title {
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }
      .detail-content-item-content {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  .comment {
    .comment-content {
      padding: 20rpx;
      .comment-content-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .comment-content-input {
        margin-bottom: 20rpx;
        textarea {
          height: 200rpx;
          width: 100%;
        }
        border: 1px solid #ccc;
        padding: 20rpx;
      }
      .comment-content-btn {
        button {
          width: 100%;
          text-align: center;
          background-color: #409eff;
          color: #fff;
          border: none;
          border-radius: 10rpx;
        }
      }
    }
  }
}
</style>